<template>
    <view>
        <uni-forms :model="form" :rules="formRules" ref="formRef">
            <uni-forms-item name="mobile">
                <uni-easyinput
                    type="text"
                    :clearable="true"
                    v-model="form.mobile"
                    placeholder="请输入账号:"
                />
            </uni-forms-item>
            <uni-forms-item name="password">
                <uni-easyinput
                    type="password"
                    :clearable="true"
                    v-model="form.password"
                    placeholder="请输入密码:"
                />
            </uni-forms-item>
            <uni-forms-item name="intro">
                <uni-easyinput
                    type="textarea"
                    :clearable="true"
                    v-model="form.intro"
                    placeholder="请输入简介:"
                />
            </uni-forms-item>
        </uni-forms>
        <button class="uni-button" @tap="submit">登录</button>
    </view>
</template>

<script setup>
import { ref } from "vue"
const formRef = ref()
const form = ref({
    mobile: "",
    password: "",
    intro: "",
})
const formRules = ref({
    mobile: {
        rules: [
            { required: true, errorMessage: "请输入手机号!" },
            { pattern: /^1[3-8]\d{9}$/, errorMessage: "请输入正确的手机号!" },
        ],
    },
    password: {
        rules: [
            { required: true, errorMessage: "请输入密码!" },
            { pattern: /^[0-9a-zA-Z]{8}$/, errorMessage: "请输入正确的格式!" },
        ],
    },
    intro: {
        rules: [{ required: true, errorMessage: "请输入个人简介!" }],
    },
})
const submit = async () => {
    try {
        await formRef.value.validate()
        uni.showToast({
            title: "校验成功",
        })
    } catch {
        uni.showToast({
            title: "请检查表单",
            icon: "error",
        })
    }
}
</script>

<style></style>
